<template>
	<div class="store_si">
		<ul class="oul">
			<li class="oli" v-for="item in list" @click="xuan(item)">
				<img :src="item.img" alt="">
				<p class="oli_title" :style="{color:item.color}">{{item.name}}</p>
				<div class="logo">
					<img :src="item.image" alt="">
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				list:[
					{ 
						name: '快速机选',
						rout:'selective',
						img:require('@/assets/jixuan/jx.png'),
						image:require('@/assets/shouye/jx.png'),
						color:'#059C5D'
					},
					{ 
						name: '双色球' ,
						rout:'union',
						img:require('@/assets/jixuan/zs.png'),
						image:require('@/assets/shouye/shuangse.png'),
						color:'#E9554A'
					},
					{ 
						name: '福彩3D' ,
						rout:'fucai3d',
						img:require('@/assets/jixuan/sc.png'),
						image:require('@/assets/shouye/fucai.png'),
						color:'#1991FA'
					},
					{ 
						name: '七乐彩' ,
						rout:'qicai',
						img:require('@/assets/jixuan/yh.png'),
						image:require('@/assets/shouye/qicai.png'),
						color:'#7B71FE'
					},
				]
			}
		},
		created() {
		},
		methods:{
			xuan(item){
				console.log(item)
				this.$router.push(item.rout)
			}
		}
	}
</script>

<style scoped>
	.oul{
		width: 92%;
		margin: 0 auto;
		padding-top:1px;
	}
	.oul>li{
		width: 100%;
		height: 80px;
		list-style: none;
		background-color: white;
		margin-top: 10px;
		position: relative;
	}
	.oli>img{
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.oli_title{
		position: absolute;
		top: 50%;
		transform: translate(0,-50%);
		left: 19px;
		z-index: 1;
		font-size: 17px;
		font-weight: bold;
	}
	.oli_details{
		position: absolute;
		top: 45px;
		left: 19px;
		font-size: 13px;
	}
	.logo{
		width: 50px;
		height: 50px;
		/* border: 1px solid red; */
		position: absolute;
		z-index: 2;
		top: 50%;
		right: 30px;
		transform: translate(0,-50%);
	}
	.logo>img{
		width: 100%;
		height: 100%;
	}
</style>
